<template>
    <div>
        <van-nav-bar
        title="修改个人信息"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="edit">
      <form action>
          <van-cell-group>
            <el-upload
            class="avatar-uploader"
            action="http://upload-z1.qiniup.com"
            list-type="picture-card"
            :data="uploadData"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-error="uploadError"
            :before-upload="beforeupload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <van-field
            v-model="desc"
            label="个人描述"
            placeholder="请输入个人描述"
            left-icon="label-o"
          />
        </van-cell-group>
      </form>
      <van-button color="red" size="large" @touchstart="reg">确认</van-button>
    </div>
    </div>
</template>
<script>
import { Toast } from "vant";
export default {
    data() {
      return {
        imageUrl: '',
        desc:'',
        filename:'',
        user_err: "",
        addressOss:'',
        uploadData:{token:""},
        upfile : {},
      };
    },
  mounted() {
    this.m_title=this.$route.query.m_title;
      this.o_id=this.$route.query.o_id;
      let username= sessionStorage.getItem('username');
            if(!username){
              var that=this;
                Toast({
                message:'请先登录',
                duration:1000,
                onClose:function(){
                    that.$router.push('/login');
                }
                });
            }
  },
    methods: {
         onClickLeft() {
      this.$router.go(-1);
    },
    reg(){
        let username=sessionStorage.getItem('username');
        this.axios.post(
          "http://www.shop.com:8080/api.php/common/usermessageEdit?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&username=" +
            username +
            "&&describe=" +
            this.desc+"&&u_img="+this.imageUrl
        ).then(res => {
          if (res.data.status == 1) {
            Toast({
              message: "修改成功",
              icon: "success"
            });
            // 登录成功跳转到首页
            this.$router.push("/my")
          } else {
            Toast({
              message: res.data.msg,
              icon: "fail"
            });
          }
        });

    },
     handleAvatarSuccess(res, file) { //这是上传成功的操作，res会得到上传成功之后七牛云反馈给你的信息，里面包含文件名，文件路径等内容
      let username=sessionStorage.getItem('username');
      this.imageUrl = 'http://qatex3u8i.bkt.clouddn.com/'+res.key //http://q7u5z8ez2.bkt.clouddn.com/这个是图片存放的网址   res.key是文件名
      this.axios.post(
          "http://www.shop.com:8080/api.php/common/getPingjiaEidt?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name=" +
            username +"&&u_img="+this.imageUrl //上传成功后将图片链接放到数据库
        )
      },
      beforeupload(file) { //beforeupload方法，俗称上传之前的操作，
        this.axios.get("http://127.0.0.1:3000/").then(res=>{    //访问node接口，获得一个钥匙，上传需要的钥匙
          this.uploadData = {
            token : res.data.data.qiniuToken   //这个就是从node获得的钥匙
          };
        })
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      uploadError(err,file,fileList){
        this.$message.error('图片上传失败！');
      },
      uploadSuccess(err,file,fileList){
        this.$message.success('图片上传成功！');
      }
    }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>